<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
		<title></title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}
			
			html {
				height: 100%;
			}
			body {
				height: 100%;
			}
			img {
				border: 0;
			}
			div.wrap {
				width: 100%;
				margin: 0 auto;
				
				position: relative;
				background: #DDD;
			}
			div.wrap div {
				width: 200px;
				padding: 4px;
				border: 1px solid #000;
				position: absolute;
			}
			div.wrap div h3 {
				line-height: 35px;
			}
			div.wrap div img {
				width: 200px;
			}
		</style>
		<script>
			onload = function(){
				var btn = document.getElementById("loadmore");
				btn.onclick = function(){
					var url = "http://localhost/AJAX/waterfall.txt";
					var req = new XMLHttpRequest();
					req.open("get",url,true);
					req.onreadystatechange = function(){
						if(req.readyState==4 && req.status==200){
							var list = JSON.parse(req.responseText);
							waterfall(list);
						}
					}
					req.send();
				}
			}
			var positionArray = [];
			function waterfall(list){
				var all = document.getElementById("wrap");
				var oDiv = all.children[0];
				for(var i in list){
					var _div = oDiv.cloneNode(true);
					_div.children[1].children[0].src = list[i].src;
					all.appendChild(_div);
				}
				var imglist = all.children;
				//var 页面宽度 = document.body.clientWidth;
				var pageWidth = document.body.clientWidth;
				//var 共几列图片 = Math.floor(页面宽度/图片宽度);
				var colcount = Math.floor(pageWidth/200);
				for(var i=0; i<colcount; i++){
					positionArray.push(0);
				}
				//var 水平间隙 = (页面的宽度 - 图片宽度*共几列图片)/（列数+1）
				var xspace = (pageWidth - 200*colcount)/(colcount+1);
				//var 垂直间隙 = 20;
				var yspace = 20;

				for(var i=0; i<imglist.length; i++) {
				/**
					//var colIndex = i%列数 + 1;
					var colIndex = i%colcount + 1;
					//var x = 水平间隙*colIndex + 图片宽度*(colIndex-1);
					var x = xspace*colIndex + 200*(colIndex-1);
				*/
					var colIndex = getMinHeightIndex()+1;
					var x = xspace*colIndex + 200*(colIndex-1);
					var y = positionArray[colIndex] + yspace;
				/**
					if(i >= colcount) {
						//var y = imglist[i-列数].offsetTop+imglist[i-列数].offsetHeight + 垂直间隙;
						var y = imglist[i-colcount].offsetTop + imglist[i-colcount].offsetHeight + yspace;
					} else {
						var y = yspace;
					}
				*/
					imglist[i].style.left = x + "px";
					imglist[i].style.top = y + "px";
					positionArray[colIndex] += imglist[i].offsetHeight; 
				}
				
				function getMinHeightIndex(){
					var min = positionArray[0];
					var minIndex = 0;
					for(var i in positionArray){
						if(positionArray[i] < min) {
							min = positionArray[i];
							minIndex = i;
						}
					}
					return minIndex;
				}
			}
		</script>
	</head>

	<body>
		<div class="wrap" id="wrap" >
			<div>
				<h3>瀑布流</h3>
				<a href="javascript:void(0)" title=""><img src="img/58.jpg" alt="" title="" /></a>
				<p>瀑布流瀑布流瀑布流瀑布流</p>
				<span>瀑布流瀑布流瀑布流</span>
			</div>
		
		</div>
		<div id="loadmore" style="width:100%; height: 20px; background:gray; position:fixed; bottom:10px">加载更多</div>
	</body>

</html>